<template>
  <scroll-view
    class="table-container"
    :scroll-y="true"
    @scroll="handleScroll"
    :style="{ height: `${tableHeight}px` }"
  >
    <view v-for="(row, rowIndex) in visibleData" :key="rowIndex" class="table-row">
      <view class="table-cell">{{ row.userName }}</view>
      <view class="table-cell">
        <view v-for="(item, index) in row.divisionSettingInfo" :key="index" class="checkbox-group">
          <uni-data-checkbox
            v-if="item.orgName === '材料审查情况'"
            v-model="radio1"
            :localdata="valueOptions"
          />
          <uni-data-checkbox
            v-else-if="item.orgName === '现场核查情况'"
            v-model="radio2"
            :localdata="valueOptions2"
          />
          <text v-else>{{ item.cumulativeTimeout }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: "XlhTable",
  props: {
    divisionSettingList: {
      type: Array,
      required: true
    },
    valueOptions: {
      type: Array,
      default: () => []
    },
    valueOptions2: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableHeight: 500, // 可根据实际需求调整
      scrollTop: 0,
      rowHeight: 60, // 单行高度
      visibleData: []
    };
  },
  computed: {
    // 虚拟滚动数据分片
    totalRows() {
      return this.divisionSettingList.length;
    }
  },
  watch: {
    divisionSettingList: {
      immediate: true,
      handler(newVal) {
        this.updateVisibleData();
      }
    }
  },
  methods: {
    handleScroll(event) {
      this.scrollTop = event.detail.scrollTop;
      this.updateVisibleData();
    },
    updateVisibleData() {
      const start = Math.floor(this.scrollTop / this.rowHeight);
      const end = start + Math.ceil(this.tableHeight / this.rowHeight);
      this.visibleData = this.divisionSettingList.slice(start, end);
    }
  }
};
</script>

<style scoped lang="less">
.table-container {
  width: 100%;
  overflow: auto;
}

.table-row {
  display: flex;
  justify-content: space-between;
  line-height: 60rpx;
  border-bottom: 1rpx solid #757575;
}

.table-cell {
  flex: 1;
  padding: 0 16rpx;
}

.checkbox-group {
  display: flex;
  align-items: center;
}
</style>